/**
 * 首先搞清楚几个滚动属性：clientHeight scrollTop
 * scrollHeight    文档内容实际高度，包括超出视窗的溢出部分
 * scrollTop   滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离
 * clientHeight  窗口可视范围高度（就是自己能看到的高度，如果这个盒子都在可视区内容则是盒子的高度）
 *
 * 1. startIndex：可视区第一个元素标号（图示中为3）
 * 2. endIndex：可视区最后一个元素标号（图示中为12）
 * 3. startOffset：可视区第一个元素的向上偏移量
 */

let dom = {
  vp: document.querySelector(".viewport"),
  ul: document.querySelector("#content ul"),
  content: document.querySelector('#content')
}
let itemHeight = 110 // li(100) + margin-b(10)
let maxSize = Math.floor(dom.vp.clientHeight / itemHeight) // 视口最多可放item的个数
let mockData = [] // 模拟的数据

let startIndex = 0
let endIndex = maxSize

//init mockData
let getData = () => {
  for (let i = 0; i < 1000; i++) {
    mockData.push({
      content: `我是第${i + 1}条显示的数据`
    })
  }
}

// load Data and insert dom page
let loadData = () => {
  let html = ""
  let sliceData = mockData.slice(startIndex, endIndex)
  for (let i = 0; i < sliceData.length; i++) {
    html += `
    <li class="item">
      <p>${sliceData[i].content} </p>
    </li>`;
    dom.ul.innerHTML = html
  }
}

// update dom : sliceData + render html
let updateDom = function () {
  let sliceData = mockData.slice(startIndex, endIndex)
  let items = dom.vp.querySelectorAll('.item')
  for (let i = 0; i < sliceData.length; i++) {
    items[i].querySelector("p").innerHTML = sliceData[i].content
  }
}

// scroll watch
dom.vp.addEventListener("scroll", function () {
  let scrollTop = dom.vp.scrollTop //scrollHeight
  startIndex = Math.floor(scrollTop / itemHeight) // reCompute startIndex
  endIndex = startIndex + maxSize  // 滚出viewport的+maxsize
  // update dom
  updateDom()
  // translateY
  dom.ul.style.transform = `translateY(${startIndex * itemHeight}px)`

})

let init = () => {
  // mockData
  getData()
  loadData()
  // compute list-phantom height by mockData
  dom.content.style.height = itemHeight * mockData.length + 'px'
}
init()